<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>菜品选择</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="js/jquery.fly.min.js"></script>
    <script src="js/requestAnimationFrame.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="css/itemType.css">

    <script type="text/javascript" src="js/shopcartAnim.js"></script>
    <script type="text/javascript" src="js/async.js"></script>
    <script type="text/javascript" src="js/view.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
    <style type="text/css">
    .glyphicon-shopping-cart {
        color: #FFFFFF;
    }

    .cart-item {
        padding: 12px;
    }
    </style>
    <style type="text/css">
.box{float:left; width:198px; height:320px; margin-left:5px; border:1px solid #e0e0e0; text-align:center} 
.box p{line-height:20px; padding:4px 4px 10px 4px; text-align:left} 
.box:hover{border:1px solid #f90} 
.box h4{line-height:32px; font-size:14px; color:#f30;font-weight:500} 
.box h4 span{font-size:20px} 
.u-flyer{display: block;width: 50px;height: 50px;border-radius: 50px;position: fixed;z-index: 9999;} 
 
.m-sidebar{position: fixed;top: 0;right: 0;background: #000;z-index: 2000;width: 35px;height: 100%;font-size: 12px;color: #fff;} 
.cart{color: #fff;text-align:center;line-height: 20px;padding: 200px 0 0 0px;} 
.cart span{display:block;width:20px;margin:0 auto;} 
.cart i{width:35px;height:35px;display:block; background:url(car.png) no-repeat;} 
#msg{position:fixed; top:300px; right:35px; z-index:10000; width:1px; height:52px; line-height:52px; font-size:20px; text-align:center; color:#fff; background:#360; display:none} 
</style>
 <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
    <!-- Search Header -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">Web饿了么</a>
            </div>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">你好！伙计</a></li>
                <li><a class="glyphicon glyphicon-shopping-cart" data-toggle="modal" data-target=".fade">购物车</a></li>
            </ul>
        </div>
        <!-- /.container-fluid -->
        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#all" aria-controls="all" role="tab" data-toggle="tab">所有</a></li>
            <li role="presentation"><a href="#drink" aria-controls="drink" role="tab" data-toggle="tab">酒水</a></li>
            <li role="presentation"><a href="#main_food" aria-controls="main_food" role="tab" data-toggle="tab">主食</a></li>
            <li role="presentation"><a href="#snack" aria-controls="snack" role="tab" data-toggle="tab">小吃</a></li>
            <li role="presentation"><a href="#big_food" aria-controls="big_food" role="tab" data-toggle="tab">套餐</a></li>
        </ul>
    </nav>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="all">
            <div class="container" id="container-all">
            </div>
            <nav aria-label="...">
                <ul class="pager" id="pager-all">
                    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </nav>
        </div>
        <div role="tabpanel" class="tab-pane" id="drink">
            <div class="container" id="container-drink">
            </div>
            <nav aria-label="...">
                <ul class="pager" id="pager-drink">
                    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </nav>
        </div>
        <div role="tabpanel" class="tab-pane" id="main_food">
            <div class="container" id="container-main-food">
            </div>
            <nav aria-label="...">
                <ul class="pager" id="pager-main-food">
                    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </nav>
        </div>
        <div role="tabpanel" class="tab-pane" id="snack">
            <div class="container" id="container-snack">
            </div>
            <nav aria-label="...">
                <ul class="pager" id="pager-snack">
                    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </nav>
        </div>
        <div role="tabpanel" class="tab-pane" id="big_food">
            <div class="container" id="container-big-food">
            </div>
            <nav aria-label="...">
                <ul class="pager" id="pager-big-food">
                    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> 上一页</a></li>
                    <li class="next"><a href="#">下一页 <span aria-hidden="true">&rarr;</span></a></li>
                </ul>
            </nav>
        </div>
    </div>
    <!-- Small modal -->
    <!-- 购物车 弹出框 -->
    <div class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Modal title</h4>
                </div>
                <div class="modal-body" id="my-shoppingcart">
                    <div class="row">
                        <button class="glyphicon glyphicon-remove-circle"></button>美食A 数量：
                        <button class="glyphicon glyphicon-plus-sign"></button>10
                        <button class="glyphicon glyphicon-minus-sign"></button>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary">购买</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->


<!-- 购物车二 -->
      <div class="cd-cart-container empty">
            <a href="#0" class="cd-cart-trigger">
                购物车
                <ul class="count"> <!-- cart items count -->
                    <li>0</li>
                    <li>0</li>
                </ul> <!-- .count -->
            </a>

            <div class="cd-cart">
                <div class="wrapper">
                    <header>
                        <h2>购物车</h2>
                        <span class="undo">已删除 <a href="#0">恢复</a></span>
                    </header>

                    <div class="body">
                        <ul id="cartlist">
                            <!-- products added to the cart will be inserted here using JavaScript -->
                        </ul>
                    </div>

                    <footer>
                        <a href="#0" class="checkout" id="cart-checkout"><em>结算 - ￥<span>0</span></em></a>
                    </footer>
                </div>
            </div> <!-- .cd-cart -->
        </div>
        <!-- end 购物车二 -->



    <script type="text/javascript">
    $(function() {
        ///动态添加翻页效果（Ajax请求并获取结果）
        $("#pager-all").css('display', 'none');
        $("#pager-drink").css('display', 'none');
        $("#pager-main-food").css('display', 'none');
        $("#pager-snack").css('display', 'none');
        $("#pager-big-food").css('display', 'none');
        //alert("获取到的 mid 为： " + windowOpt().getParam("mid"));

        var ajaxOpt = asyncRequest("http://localhost:8080/ceat/foodlist");
        var refresher = foodListRefresher($("#container-all"), $("#container-drink"), $("#container-main-food"), $("#container-snack"), $("#container-big-food"));
        var dd = {
        	"cmd":"judgeIfExist",
        	"mid":windowOpt().getParam("mid")
        };
        ajaxOpt.intervalDoPost(dd, refresher.refresh);

        ///每次窗口变换，都需要重新绑定按钮点击事件
        $(window).on("resize",function(e){
        //02 01 clean click event
        $(".flying").unbind("click");
        //02 02 init click event again
        shoppingCart.addFlyAnimate(".flying",".cd-cart-trigger");
        });
    });
    </script>
    <script type="text/javascript" src="js/main.js"></script>
</body>

</html>